<template>
  <div>
    <a-collapse v-model="activeKey">
      <a-collapse-panel key="1" header="支付订单">
        <a-steps :current="current">
          <a-step
            @click="current = 0"
            title="创建订单"
            description="This is a description."
          />
          <a-step
            @click="current = 1"
            title="支付订单"
            description="This is a description."
          />
          <a-step
            @click="current = 2"
            title="完成订单"
            description="This is a description."
          />
          <a-step
            @click="current = 3"
            title="取消订单"
            description="This is a description."
          />
        </a-steps>
        <div v-if="current == 0"></div>
        <div v-if="current == 1">2</div>
        <div v-if="current == 2">3</div>
        <div v-if="current == 3">4</div>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="退款订单">
        <a-steps :current="1" status="error">
          <a-step title="创建订单" description="This is a description." />
          <a-step title="支付订单" description="This is a description." />
          <a-step title="完成订单" description="This is a description." />
          <a-step title="取消订单" description="This is a description." />
        </a-steps>
      </a-collapse-panel>
      <a-collapse-panel key="3" header="转账订单">
        <a-steps :current="0" status="error">
          <a-step title="创建订单" description="This is a description." />
          <a-step title="支付订单" description="This is a description." />
          <a-step title="完成订单" description="This is a description." />
          <a-step title="取消订单" description="This is a description." />
        </a-steps>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeKey: 1,
      current: 1
    };
  }
};
</script>
